<template>
  <div class="class-detail">
    <class-main/>
    <stage-dialog :visible-dialog="stageDialog" @closeAddStage="stageDialog= false"/>
    <class-dialog :visible-dialog="classDialog" @closeAddClass="classDialog= false"/>
    <div class="button-wrap">
      <el-button @click="backStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">保存并继续</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import classMain from './classdetail/complextable'
import stageDialog from './classdetail/stageDialog'
import classDialog from './classdetail/classDialog'
import { pushMessageBus } from './eventbus'
export default {
  components: {
    classMain,
    stageDialog,
    classDialog
  },
  data() {
    return {
      stageDialog: false,
      classDialog: false
    }
  },
  mounted() {
    pushMessageBus.$on('fromStep-openAddStage', () => {
      this.stageDialog = true
    })
    pushMessageBus.$on('fromStep-openAddClass', () => {
      this.classDialog = true
    })
  },
  methods: {
    backStep() {
      this.$emit('classBack')
    },
    nextStep() {
      this.$emit('classNext')
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.class-detail {
  .button-wrap {
    margin-top: 40px;
  }
}
</style>
